<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>注册</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">

                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a class="navbar-brand" href="#">小红书图书管理系统</a>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                               data-toggle="dropdown">Dropdown link</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another
                                action</a> <a class="dropdown-item" href="#">Something else here</a>
                                <div class="dropdown-divider">
                                </div>
                                <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                        </li>
                    </ul>
                    <form class="form-inline">
                        <input class="form-control mr-sm-2" type="text"/>
                        <button class="btn btn-primary my-2 my-sm-0" type="submit">
                            Search
                        </button>
                    </form>
                    <ul class="navbar-nav ml-md-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
                               data-toggle="dropdown">Dropdown link</a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another
                                action</a> <a class="dropdown-item" href="#">Something else here</a>
                                <div class="dropdown-divider">
                                </div>
                                <a class="dropdown-item" href="#">Separated link</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <form:form action="../user/reg" modelAttribute="user" enctype="multipart/form-data" method="post">
                        <div class="form-group row">

                            <form:label path="name" cssClass="col-sm-2 col-form-label">
                                用户名：
                            </form:label>
                            <div class="col-sm-10">
                                <form:input path="name" cssClass="form-control"/>
                                <div class="invalid-feedback">
                                    <form:errors path="name"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <form:label path="age" cssClass="col-sm-2 col-form-label">年龄:</form:label>
                            <div class="col-sm-10">
                                <form:input path="age" cssClass="form-control"/>
                                <div class="invalid-feedback">
                                    <form:errors path="age"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <form:label path="birthday" cssClass="col-sm-2 col-form-label">生日:</form:label>
                            <div class="col-sm-10">
                                <form:input path="birthday" cssClass="form-control"/>
                                <div class="invalid-feedback">
                                    <form:errors path="birthday"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <form:label path="pwd" cssClass="col-sm-2 col-form-label">密码:</form:label>
                            <div class="col-sm-10">
                                <form:password path="pwd" cssClass="form-control"/>
                                <div class="invalid-feedback">
                                    <form:errors path="pwd"/>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <form:label path="photo" cssClass="col-sm-2 col-form-label">头像:</form:label>
                            <div class="col-sm-10">
                                <input type="file" class="form-control" name="photox">
                                <div class="invalid-feedback">
                                    <form:errors path="photo"/>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">
                            注册
                        </button>
                    </form:form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h3>
                h3. Lorem ipsum dolor sit amet.
            </h3>
        </div>
    </div>
</div>
<!--
  action:表单交给服务器那个程序处理
  html表单缺陷：
  1 不能限定输入类型和范围---数据校验(1如何如何校验 2 显示错误消息)
  2 不能帮回填已有内容-----给value赋值

-->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>

</body>
</html>
